<template>
    <div class="large-demandRate">
        <div id="demandRateChart"></div>
    </div>
</template>

<script lang="ts">
import { echartLoad, toDecimalNoZero } from "@/utils";
import { Component, Vue,Prop } from "vue-property-decorator";
@Component({
    name: "home",
    components: {},
})
export default class extends Vue {
    @Prop({ default: () => {} }) pageData!: any;
    chart: any = null;
    mounted() {
        echartLoad(() => {
            this.setChart();
        });
    }
    setChart() {
        if (this.chart) {
            this.resetChart();
        } else {
            this.initChart();
        }
    }
    resetChart() {
        const options = this.chart.getOption();
        options.series = this.getSeries();
        this.chart.setOption(options, true);
    }
    initChart() {
        const chartDom = document.getElementById("demandRateChart");
        // eslint-disable-next-line @typescript-eslint/no-this-alias
        const options: any = {
            grid:{
                top:20,
                bottom:30
            },
            
            tooltip: {
                trigger: "axis",
            },
            xAxis: [
                {
                    type: "category",
                    data: this.pageData.map(item=>item.name),
                    axisLine:{
                        
                    },
                    axisLabel:{
                        color:'#fff'
                    },
                    axisPointer: {
                        type: "shadow",
                    },
                },
            ],
            yAxis: [
                {
                    type: "value",
                    name: "",
                    min: 0,
                    max: 110,
                    interval:110 /5,
                    axisLabel: {
                        formatter: "{value}",
                        color:'#fff'
                    },
                }
            ],
            series: this.getSeries(),
        };
        if (chartDom) {
            this.chart = window.echarts.init(chartDom as HTMLDivElement);
            this.chart.setOption(options);
        }
    }

    getSeries() {
        return [
            {
                name: "科技成果",
                type: "bar",
                color:'#27A6FF',
                barWidth:'30',
                tooltip: {
                    valueFormatter: function (value) {
                        return value + "%";
                    },
                },
                data: this.pageData.map(item=>item.percentage),
            }
        ];
    }
}
</script>
<style lang="scss">
.large-demandRate {
    margin-top: 10px;
    height: 22vh;
    flex-grow: 1;
    #demandRateChart {
        width: 100%;
        height: 100%;
    }
}
</style>
